<template>
  <div :style="{
        fontSize: detail.style.fontSize + 'px',
        fontFamily: detail.style.fontFamily,
        color: detail.style.foreColor,
        lineHeight: detail.style.position.h + 'px',
        fontWeight:detail.style.fontWeight,
        animation: `scroText `+detail.style.carouselTime+`s linear infinite`
    }" class="scroText">
    {{ detail.style.text }}
  </div>
</template>

<script>
import BaseView from './View';

export default {
  name: 'scroText',
  extends: BaseView,
  data() {
    return {}
  },
}
</script>
<style>
.scroText {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
}

@keyframes scroText {
  0% {
    text-indent: 100%;
  }
  100% {
    text-indent: -100%;
  }
}
</style>
